<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<view class="header" v-if="back">
			<view id="back">
				<u-icon name="arrow-left" @click="clickBack" size="60rpx"></u-icon>
			</view>
		</view>
		<u-cell-group>
			<u-cell title="用户名" @click="copyUsername()" :value="user.username" size="large"></u-cell>
			<u-cell title="姓名" :value="user.realname" size="large" clickable isLink @click="toEditRealname"></u-cell>
			<u-cell title="性别" @click="showGenderPicker()" :value="getGender(user.gender)" isLink size="large">
			</u-cell>
			<u-cell title="生日" @click="showBirthdayPicker()" :value="getBirthday(user.birthday)" isLink size="large">
			</u-cell>
			<u-cell title="身份" @click="clickRole()" :value="getRole(user.role)" size="large">
			</u-cell>
		</u-cell-group>
		<view class="footer">
			<u-button class="saveBtn" @click="clickSave" text="保存"></u-button>
		</view>
		<u-picker :show="isShowGenderPicker" @close="closeGenderPicker" @cancel="closeGenderPicker"
			@confirm="confirmGenderPicker" :columns="genderOptions" itemHeight="78" confirmColor="#3d5cff" title="选择性别"
			:closeOnClickOverlay=true :defaultIndex="defaultGenderIndex"></u-picker>
		<u-datetime-picker ref="birthdayPicker" :show="isShowBirthdayPicker" @close="closeBirthdayPicker"
			@cancel="closeBirthdayPicker" @confirm="confirmBirthdayPicker" :minDate="-2209017600000"
			:maxDate="Number(new Date())" itemHeight="78" confirmColor="#3d5cff" title="选择生日" :closeOnClickOverlay=true
			v-model="birthdayValue" mode="date" :formatter="formatter"></u-datetime-picker>
	</view>
</template>

<script>
	var _this = null;
	const api = require('api.js');
	export default {
		data() {
			return {
				back: false,
				user: {},
				defaultGenderIndex: [1],
				genderOptions: [
					['男', '女']
				],
				isShowGenderPicker: false,
				isShowBirthdayPicker: false,
				birthdayValue: 0
			}
		},
		methods: {
			clickBack: function(e) {
				var pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack({
						url: pages[pages.length - 2].url
					})
				}
			},
			loadUser: function() {
				api.loadUserInfo(() => {
					_this.user = api.user;
					_this.defaultGenderIndex = _this.user.gender == 2 ? [1] : [0];
					_this.birthdayValue = Number(new Date(_this.user.birthday));
				}, () => {});
			},
			toEditRealname: function() {
				uni.navigateTo({
					url: '/pages/account/editprofile/editrealname?realname=' + _this.user.realname
				})
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			clickSave: function(e) {
				_this.saveUser();
				uni.showToast({
					icon: 'success',
					title: "保存成功",
					duration: 2000
				});
				setTimeout(() => {
					uni.redirectTo({
						url: '../account/account'
					})
				}, 2000);
			},
			getGender: function(e) {
				return e == 0 ? '未知' : (e == 1 ? '男' : '女');
			},
			getBirthday: function(e) {
				if (e != undefined && e != null && e != '') {
					return e;
				}
				return '暂未设置';
			},
			getRole: function(e) {
				if (e == 'admin') {
					return '管理员';
				} else if (e == 'teacher') {
					return '教师';
				}
				return '学生';
			},
			setRealname: function(e) {
				_this.user.realname = e;
			},
			saveUser: function() {
				api.postAsync('/api/user/save', {
					'birthday': _this.user.birthday,
					'gender': _this.user.gender,
					'realName': _this.user.realname,
					'role': ''
				}, res => {
					_this.loadUser();
				}, () => {});
			},
			showGenderPicker: function() {
				_this.isShowGenderPicker = true;
			},
			closeGenderPicker: function() {
				_this.isShowGenderPicker = false;
			},
			confirmGenderPicker: function(e) {
				_this.closeGenderPicker();
				var gender = e.value[0] == '男' ? 1 : 2;
				_this.user.gender = gender;
			},
			showBirthdayPicker: function() {
				_this.isShowBirthdayPicker = true;
			},
			closeBirthdayPicker: function() {
				_this.isShowBirthdayPicker = false;
			},
			confirmBirthdayPicker: function(e) {
				_this.closeBirthdayPicker();
				var d = new Date(e.value);
				var yyyy = d.getFullYear();
				var mm = (d.getMonth() + 1).toString().padStart(2, '0');
				var dd = (d.getDate()).toString().padStart(2, '0');
				var w = yyyy + "-" + mm + "-" + dd;
				_this.user.birthday = w;
			},
			copyUsername: function() {
				uni.setClipboardData({
					data: _this.user.username,
					showToast: false,
					success: function() {
						_this.$refs.uToast.show({
							type: 'success',
							message: '用户名已复制',
							icon: ''
						})
					}
				});
			},
			clickRole: function() {
				_this.$refs.uToast.show({
					type: 'error',
					message: '此项无法更改',
					icon: ''
				})
			}
		},
		onLoad() {
			_this = this;
			_this.back = getCurrentPages().length > 1;
			_this.loadUser();
		},
		onReady() {
			_this.$refs.birthdayPicker.setFormatter(_this.formatter)
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: calc(var(--status-bar-height) + 96rpx);
		position: relative;

		#back {
			position: absolute;
			padding-top: calc(var(--status-bar-height) + 18rpx);
			padding-left: 12rpx;
			z-index: 99;
		}
	}

	.footer {
		position: fixed;
		width: 100%;
		height: 100rpx;
		bottom: 40rpx;
	}

	.saveBtn {
		width: 640rpx;
		border-width: 0;
		border-radius: 20rpx;
		background-color: #3d5cff;
		color: white;
	}
</style>
